<template>
  <!-- 档案移位 -->
  <div>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <el-form :inline="true" :model="queryParam" class="demo-form-inline" size="medium">
        <el-form-item label="档号/题名">
          <el-input v-model="queryParam.archiveNoOrName" placeholder="请输入档号或题名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">添加到移位列表</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" :body-style="{ padding: 10 }">
      <el-table :data="tableData" border style="width: 100%" height="55vh" row-key="labelId" ref="table"
        @selection-change="selectionChange">
        <el-table-column :reserve-selection="true" type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column v-for="item of tableProps" :key="item.props" :prop="item.prop" :label="item.title"
          :width="item.width">
        </el-table-column>
        <!-- <el-table-column label="操作" min-width="60">
          <template slot-scope="{ row }">
            <el-popconfirm title="确定要删除吗？" @confirm="() => archiveDel(row)">
              <el-button
                slot="reference"
                icon="el-icon-delete"
                link
                size="mini"
                class="danger_button"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
</el-table-column> -->
      </el-table>
      <!-- <el-button type="primary" @click="archivesMove" style="margin-top: 10px">移位</el-button> -->
    </el-card>
    <el-card>
      <pagination ref="pagination" :totalCount="totalCount" @pagination="pagination"></pagination>
    </el-card>

    <move-dialog ref="moveDialog" @ok="archiveLoadData"></move-dialog>
  </div>
</template>

<script>
import { archivesMovePage } from '@/api/rfid/label'

import moveDialog from './dialog/moveDialog.vue'
export default {
  name: 'archivesMove',
  components: { moveDialog },
  data() {
    return {
      totalCount: 0,
      formData: {},
      queryParam: {},
      searchModel: {
        pageNo: 1,
        pageSize: 10,
      },
      tableData: [],
      selectionData: [],
      tableProps: [
        { title: '档号', prop: 'archiveNo', width: '', checked: true },
        { title: '题名', prop: 'archiveName', width: '', checked: true },
        { title: 'RFID', prop: 'rfid', width: '', checked: true },
        { title: '页数', prop: 'pageNo', width: '', checked: true },
        { title: '存放位置', prop: 'positionId_dictText', width: '', checked: true },
      ],
    }
  },
  mounted() {
    this.archiveLoadData()
  },
  methods: {
    // 查询
    onSubmit() {
      this.$refs.pagination.resetPagination()
    },
    // 重置
    reset() {
      this.queryParam = {}
      this.$refs.pagination.resetPagination()
    },
    // 分页的方法
    pagination(val) {
      this.searchModel.pageNo = val.page
      this.searchModel.pageSize = val.limit
      this.archiveLoadData()
    },
    // 表格复选框触发的方法
    selectionChange(val) {
      this.selectionData = val
    },
    archiveLoadData() {
      var param = Object.assign(this.queryParam, this.searchModel)
      archivesMovePage(param)
        .then((res) => {
          if (res.data.code === 200) {
            this.tableData = res.data.data.records
            this.totalCount = res.data.data.total
            if (this.$refs.table) {
              // 现要求移位之后需要清除勾选状态
              this.$refs.table.clearSelection()
            }

          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
          this.$message.error(err)
        })
    },
    handleAdd() {
      if (this.selectionData.length === 0) {
        this.$message.warning('请选择要更换位置的档案')
        return
      }
      this.$refs.moveDialog.add(this.selectionData, 'archive')
    },
    loadData(record) {
      this.tableData = this.tableData.concat(record)
    },
    archiveDel(row) {
      this.tableData = this.tableData.filter((item) => item.labelId !== row.labelId)
    },
  },
}
</script>

<style scoped lang="less">
.demo-form-inline {
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>
